<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.6.6/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.6.6/themes/icon.css">
    <script type="text/javascript" src="../jquery-easyui-1.6.6/jquery.min.js"></script>
    <script type="text/javascript" src="../jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.serializeJSON-master/jquery.serializejson.min.js"></script>
    <title>分类</title>
</head>

<body>
    <ul id="btn" style="padding:0">
        <a id="btn1" href="#" class="easyui-linkbutton" type="1">新闻</a>
        <a id="btn2" href="#" class="easyui-linkbutton" type="2">产品</a>
        <a id="btn3" href="#" class="easyui-linkbutton" type="3">用户</a>
        <a id="btn4" href="#" class="easyui-linkbutton" type="4">评论</a>
        <!-- <a id="btna" href="javascript:addData()" class="easyui-linkbutton">新增分类</a> -->
    </ul>
    <!-- <ul id="tt"></ul> -->
    <!-- 树表 -->
    <table id="tt" style="width:100%;height:100%;" data-options="toolbar:toolbar"></table>
    <!-- 编辑弹窗 -->
    <div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="closed:true,iconCls: 'icon-save' " style="width:400px;height:180px;padding:10px ">
        <form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
            <input type="hidden" name="_id" />
            <!-- <div style="margin-bottom:20px ">
                    <input class="easyui-textbox " name="type " style="width:100% " data-options="label: '类别:',required:true ">
                </div> -->
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="text" style="width:100%" data-options="label: '分类名:',required:true ">
            </div>
            <!-- <div style="margin-bottom:20px ">
                    <input class="easyui-textbox " name="text " style="width:100% " data-options="label: '分类名:',required:true ">
                </div> -->
        </form>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
        </div>
    </div>

</body>
<script>
    function getTree(type) {
        $('#tt').treegrid({
            url: `${parent.globalUrl}cate/list/${type}`,
            idField: '_id',
            treeField: 'text',
            method: 'post',
            fit: true,
            onSelect: function(node) {
                // console.log(node._id);
            },
            columns: [
                [{
                    title: 'Task Name',
                    field: 'text',
                    width: 180
                }, {
                    field: 'add',
                    title: 'add',
                    width: 60,
                    formatter: function(value, row, index) {
                        return `<a href = "javascript:addData( '${row._id}') " > 增加 </a>`;
                    }
                }, {
                    field: 'update',
                    title: 'update',
                    width: 80,
                    formatter: function(value, row, index) {
                        return `<a href = "javascript:editData( '${row._id}') " >修改</a>`;
                    }
                }, {
                    field: 'delete',
                    title: 'delete',
                    width: 80,
                    formatter: function(value, row, index) {
                        return `<a href = "javascript:deleRows( '${row._id}') " >删除</a>`;
                        // console.log(row);
                    }
                }]
            ],
            toolbar: [{
                text: '增加类别',

                text: 'Add',

                iconCls: 'icon-add',
                handler: function() {
                    $('#dlg').dialog('open');
                }
            }, {
                text: '删除多个',
                iconCls: 'icon-cut',
                handler: function() {
                    //选中的所有对象的id是不是应该形成一个数组
                    deleteRows();

                }

            }]
        });

        function submitForm() {
            $('#ff').form('submit', {
                onSubmit: function() {
                    if ($(this).form('enableValidation').form('validate')) {
                        // 表单验证成功
                        var formData = $('#ff').serializeJSON();
                        console.log(formData.cate);
                        if (formData._id.length > 0) {
                            $.ajax({
                                url: `${parent.globalUrl}release/data/` + formData._id,
                                type: 'put',
                                data: formData
                            }).then(res => {
                                $('#dlg').dialog('close'); //关闭窗口
                                $('#dg').datagrid('reload'); //刷新页面
                            })
                        } else {
                            delete formData._id;
                            $.ajax({
                                url: `${parent.globalUrl}release/data/`,
                                type: 'post',
                                data: formData
                            }).then(res => {
                                $('#dlg').dialog('close'); //关闭窗口
                                $('#dg').datagrid('reload'); //刷新页面
                            })
                        }
                    }
                    return false;
                }
            });
        }

        function clearForm() {
            $('#ff').form('clear');
        }

        function editData(id) {
            // console.log(id);
            $('#ff').form('load', `${parent.globalUrl}release/data/` + id);
            $('#dlg').dialog('open');
        }

        function deleteData(id) {
            $.messager.confirm('提示', '你确认删除该数据?', function(r) {
                if (r) {
                    $.ajax({
                        url: `${parent.globalUrl}release/data/` + id,
                        type: 'delete'
                    }).then(res => {
                        $('#dg').datagrid('reload');
                    })
                }
            });
        }

        function deleteRows() {
            $.messager.confirm('提示', '你确认删除该数据?', function(r) {
                if (r) {
                    var selections = $('#dg').datagrid('getSelections');
                    deleRows();
                }
            })
        }
    }
    //点击按钮切换数
    $('#btn a').on('click', function() {
        return getTree($(this).attr('type'));
        console.log($(this).attr('type'));
        // return getTree(5);
    })

    // 表单验证
    function submitForm() {
        $('#ff').form('submit', {
            onSubmit: function() {
                //表单验证成功
                if ($(this).form('enableValidation').form('validate')) {
                    var formData = $('#ff').serializeJSON();
                    console.log($('#tt').treegrid('getSelected'));
                    // console.log(formData);
                    //添加按钮
                    var i = 5;

                    function addBtn() {
                        var add = $('#btn').append('<a/>');
                        add = $("#btn a:last-child");
                        add.attr({
                            id: 'btn' + i,
                            href: '#',
                            class: 'easyui-linkbutton l-btn l-btn-small',
                            type: i
                        });
                        add.append($('<span/>').attr('class', 'l-btn-left').append($('<span/>').attr('class', 'l-btn-text').html(formData.text)));
                    }
                    //是否存在上级节点
                    if ($('#tt').treegrid('getSelected')) {
                        //修改数据
                        if (formData._id.length > 0) {
                            $.ajax({
                                url: `${parent.globalUrl}cate/data/` + formData._id,
                                type: 'put',
                                data: formData
                            }).then(res => {
                                console.log(res);
                                $('#dlg').dialog('close');
                                $('#tt').treegrid('reload');
                            })
                        } else {
                            //增加数据
                            delete formData._id;
                            formData.parentId = $('#tt').treegrid('getSelected')._id;
                            formData.type = $('#tt').treegrid('getSelected').type;
                            $.ajax({
                                url: `${parent.globalUrl}cate/data`,
                                type: 'post',
                                data: formData
                            }).then(res => {
                                console.log(res);
                                $('#dlg').dialog('close');
                                $('#tt').treegrid('reload');
                            })
                        }
                        //新增大分类
                    } else {
                        addBtn();
                        formData.type = $('#btn a:last-child').attr('type');
                        // formData.parentId = null;
                        delete formData._id;
                        console.log(formData);
                        $.ajax({
                            url: `${parent.globalUrl}cate/data`,
                            type: 'post',
                            data: formData
                        }).then(res => {
                            console.log(res);
                            $('#dlg').dialog('close');
                            $('#tt').treegrid('reload');
                        })
                    }
                }
                return false;
            }
        });
    }

    //清空
    function clearForm() {
        $('#ff').form('clear');
    }
    //添加数据
    function addData(id) {
        // $('#ff').form('load', `${parent.globalUrl}cate/data`+id);
        clearForm();
        $('#dlg').dialog('open');
    }

    //修改数据
    function editData(id) {
        $('#ff').form('load', `${parent.globalUrl}cate/data/` + id);
        $('#dlg').dialog('open');
    }
    //删除数据
    function deleRows(id) {
        //获取子节点
        var children = $('#tt').treegrid('getChildren', id);
        //有子节点
        if (children.length) {
            // console.log(1);
            $.messager.confirm('提示', '你确认删除该数据么?', function(r) {
                if (r) {
                    // var selections = $('#tt').treegrid('getSelections');
                    // console.log(selections);
                    if (children.length > 0) {
                        var ids = [id];
                        for (let i = 0; i < children.length; i++) {
                            ids.push(children[i]._id);
                        }
                        // console.log(ids);
                        $.ajax({
                            url: `${parent.globalUrl}cate/data/removes`,
                            type: 'post',
                            data: {
                                ids: ids.toString()
                            }
                        }).then(res => {
                            $('#tt').treegrid('reload');
                        })
                    }
                }
            });
            //没有子节点
        } else {
            // console.log(0);
            $.messager.confirm('提示', '你确认删除该数据么?', function(r) {
                if (r) {
                    var selections = $('#tt').treegrid('getSelections');
                    console.log(selections);
                    if (selections.length > 0) {
                        var ids = [];
                        for (let i = 0; i < selections.length; i++) {
                            ids.push(selections[i]._id);
                        }
                        $.ajax({
                            url: `${parent.globalUrl}cate/data/removes`,

                            type: 'post',
                            data: {
                                ids: ids.toString()
                            }
                        }).then(res => {
                            $('#dg').datagrid('reload');
                            $('#tt').treegrid('reload');

                        })
                    }
                }
            });

        }
    }
</script>



</html>